<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <title>Title</title>

    <!--=====================================================================-->
    <!-- 选项卡的实现,练习了获取多个元素+循环 -->
    <!-- 4个按钮,下面4个选项卡-->
    <script>
        
        window.onload = function () {
            let inputs = document.getElementsByTagName('input');
            let cards = document.getElementsByClassName('card');

            //设置每个按钮的点击
            for (let i = 0; i < inputs.length; i++) {
                let oInput = inputs[i];

                //赋予点击事件
                oInput.onclick = function () {

                    //将所有btn都变回原来的颜色,并将所有的card都隐藏
                    for (let j = 0; j < inputs.length; j++) {
                        inputs[j].className = '';
                        cards[j].style.display = 'none';
                    }

                    //再将当前的btn变为选中
                    //console.log(this)   //此处this=oInput对象
                    //this.className = 'active';
                    oInput.className = 'active';    //不用this也行
                    cards[i].style.display = 'block';

                    //展示innerHTML的作用,可以直接获取div中的值(内容);  也可以将<p></p>通过innerHTML写入div中
                    document.getElementById('toShowInner').innerHTML = cards[i].innerHTML;
                    //定时器,作为展示效果,一秒后消除div中内容
                    setTimeout(
                        function () {
                            document.getElementById('toShowInner').innerHTML = '';}
                            , 1000
                    );
                }
            }
        };
        //补充:字符串的连接,如果需要可以添加()来提升优先度来进行运算
        alert('2+5 = '+ (2+5));

    </script>

    <style>
        .card {
            width: 200px;
            height: 200px;
            border: 1px solid black;
            display: none;
            margin-top: 10px;
        }

        .active {
            background: yellow;
        }
    </style>
</head>

<body>
<div>
    <input type="button" value="11" class="active">
    <input type="button" value="22">
    <input type="button" value="33">
    <input type="button" value="44">
</div>
<div class="card" style="display: block">111</div>
<div class="card">222</div>
<div class="card">333</div>
<div class="card">444</div>

<div id="toShowInner" class="card" style="display: block;"></div>

</body>
</html>